<template>

  <div class="system">

    <div class="main">
      <h3 class="title mb20">
        <span class="t">系统动态</span>
        <router-link target="_blank" to="/articleList?&itemType=cms_index_notice">查看更多 <RightOutlined /></router-link>
      </h3>
      <div class="system-warp">
<!--     navigation   -->
        <swiper
            :slides-per-view="3"
            :space-between="24"
            @swiper="onSwiper"
            @slideChange="onSlideChange"
            :modules="modules"
        >
          <swiper-slide v-for="item in ArticleList">
            <a target="_blank" :href="`../articleDetail/${item.article_id}`" class="slideItem">
              <div class=bor-top>
                <div class="bor-top-tit">
                  <span class="tag">{{ item.tag_names }}</span>
                  <p>{{ item.article_title }}</p>
                </div>
                <div class="date">
                  <p>{{ parseTime(item.publish_time,'{y}-{m}') }}</p>
                  <p>{{ parseTime(item.publish_time,'{d}') }}</p>
                </div>
              </div>
              <div class="bor-bottom">
                <p>{{ item.article_summary }}</p>
                <span>了解详情 <ArrowRightOutlined/></span>
              </div>
            </a>
          </swiper-slide>
        </swiper>
      </div>
    </div>


  </div>
</template>

<script lang="ts">
import {defineComponent, onMounted, ref} from 'vue';
import { Row, Col , Empty } from "ant-design-vue";
import { Navigation } from 'swiper';
import { Swiper, SwiperSlide   } from "swiper/vue";
import { RightOutlined ,ArrowRightOutlined } from '@ant-design/icons-vue';
import {getArticleListApi} from "/@/api/article";
import { parseTime} from '/@/utils';
import 'swiper/css';
import 'swiper/css/navigation';
export default defineComponent({
  name: 'system',
  components: { Row, Col , Empty , RightOutlined, ArrowRightOutlined , Swiper , SwiperSlide },

  setup() {
    const requestComplete = ref<boolean>(false);
    //const itemId:string = 'apt_ques';
    const itemId:string = 'cms_index_notice';
    const ArticleList = ref([]);


    const getArticleList = async () => {
      let data = await getArticleListApi({itemId: itemId,current: 1, size: 20});
      requestComplete.value=true;
      let { total , records } = data;
      if(total) {
        ArticleList.value = records;
      }
    };

    const init = () => {
      getArticleList();
    }



    const onSwiper = (swiper) => {
      //console.log(swiper);
    };
    const onSlideChange = () => {
      //console.log('slide change');
    };

    onMounted(init);

    return { requestComplete  ,ArticleList,parseTime,
      onSwiper,
      onSlideChange,
      modules: [Navigation],
    }
  }
})
</script>

<style lang="less" scoped>
.system{
  padding: 45px 0 60px;
  background: #F4F6FA;

  .title{
    border-bottom: 1px solid #E0E5EB;

    span.t{
      display: inline-block;
      padding-bottom: 10px;
      font-size: 20px;
      line-height: 28px;
      border-bottom: 3px solid #CD1922 ;
    }

    a{
      float: right;
      font-size: 14px;
      transform: translateY(8px);

      .anticon{
        font-size: 14px;
      }
    }
  }

  .system-warp{
    height: 264px;
  }
}

.slideItem{
  display: block;
  width: 384px;
  height: 264px;
  padding: 35px 40px;
  background: white;

  .bor-top{
    border-bottom: 1px solid #eee;

    .bor-top-tit{
      position: relative;
      width: 220px;

      .tag{
        display: inline-block;
        height: 26px;
        padding: 2px 5px;
        color: #0078FF ;
        border: 1px solid #0078FF;
        border-radius: 2px;
      }

      p{
        display: -webkit-box;
        height: 51px;
        margin-top: 15px;
        margin-bottom: 15px;
        overflow: hidden;
        font-size: 16px;
        font-weight: 600;
        color: #000 ;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }

    .date{
      position: absolute;
      top: 60px;
      right: 40px;
      text-align: right;

      p:nth-child(1){
        margin-bottom: 10px;
        line-height: 1;
        color: #999;
      }

      p:nth-child(2){
        margin-bottom: 0;
        font-size: 40px;
        font-weight: 600;
        line-height: 1;
        color: #666;
      }
    }
  }

  .bor-bottom{
    padding-top: 15px;

    p{
      display: -webkit-box;
      height: 44px;
      overflow: hidden;
      font-size: 14px;
      color: #111 ;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    span{
      color: #666;
    }
  }
}

</style>
